<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding-top: 20px;
            text-align: center;
            background-color: #193549;
        }

        .title {
            font-size: 35px;
            font-weight: 700;
            color: white;
        }

        .controller {
            margin-top: 25px;
            margin-bottom: 15px;
        }

        .controller  {
            font-size: 22px;
            color: white;
            letter-spacing: 2px;
            margin-left: 14px;
        }

        :root {
            --base: #8aa8af;
            --spacing: 10px;
            --blur: 10px;
        }

        .titleJS {
            font-size: 35px;
            font-weight: 700;
            color: var(--base);
        }

        img {
            width: 20%;
            background-color: var(--base);
            padding: var(--spacing);
            filter: blur(var(--blur));
        }
    </style>
</head>

<body>
    <div>
        <span class="title">Update CSS Variables with </span>
        <span class="titleJS">JS</span>
    </div>

    <div class="controller">
        <!-- 利用dataset(data-xxx)存储后缀 -->
        <label for="spacing">Spacing:</label>
        <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

        <label for="blur">Blur:</label>
        <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

        <label for="base">Base Color</label>
        <input type="color" name="base" value="#8aa8af">
    </div>

    <div class="info" style="color: white; font-size: 15px; margin-bottom: 15px;">
        img {
            padding: <label id="code-spacing">10px</label>;
            filter: blur(<label id="code-blur">10px</label>);
            background: <label id="code-base">#8aa8af</label>;
        }
    </div>

    <img src="pic.png" alt="">

    <script>
        const inputs = document.querySelectorAll('.controller input');
        const info = document.querySelector('.info');

        function handleUpdate() {
            const suffix = this.dataset.sizing || ''; // 获取当前属性的后缀
            
            // 获取文档根元素, 修改全局css变量
            // object.setProperty(propertyname, value, priority)
            // 属性名, 新的属性值,属性优先级(important/undefined/'')
            document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
            
            // 实时改变参数
            document.getElementById(`code-${this.name}`).innerText = this.value + suffix;
        }

        // forEach()给每个属性添加监听 change控制颜色, mousemove控制滑动条
        inputs.forEach(input => input.addEventListener('change', handleUpdate));
        inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
    </script>
</body>

</html>